<template>
  <view class="add_user">
    <!-- 注意，如果需要兼容微信小程序，最好通过setRules方法设置rules规则 -->
    <uni-card is-full>
      <u--form
        labelPosition="left"
        :model="bsUserContract"
        :rules="rules"
        ref="uForm"
      >
        <u-form-item
          label="姓名"
          prop="contractName"
          borderBottom
          labelWidth="60"
        >
          <u--input
            v-model="bsUserContract.contractName"
            border="none"
            placeholder="与身份证一致"
          ></u--input>
        </u-form-item>
        <u-form-item
          label="身份证号"
          prop="contractCard"
          borderBottom
          labelWidth="60"
        >
          <u--input
            type="idcard"
            v-model="bsUserContract.contractCard"
            border="none"
            placeholder="请填入"
          ></u--input>
        </u-form-item>
        <u-form-item label="手机号" prop="contractPhonenumber" labelWidth="60">
          <u--input
            type="number"
            v-model="bsUserContract.contractPhonenumber"
            border="none"
            placeholder="请输入"
          ></u--input>
        </u-form-item>
      </u--form>
    </uni-card>
    <u-button
      type="success"
      text="确定"
      @click="submit"
      shape="circle"
      :loading="addLoadinfg"
    ></u-button>
    <u-button @click="reset" shape="circle">取消</u-button>
  </view>
</template>

<script>
import {
  addVisitorUserApi, // 新增--编辑
} from "@/api/jingqu/addUser";

export default {
  components: {},
  data() {
    return {
      isEdit: false, // 是否进行编辑功能
      bsUserContract: {
        contractName: "", // 联系人姓名
        contractCard: "", // 联系人身份证号
        contractPhonenumber: "", // 联系人手机号
      },
      rules: {
        contractName: {
          required: true,
          message: "请填写姓名",
          trigger: ["blur", "change"],
        },
        contractCard: [
          {
            required: true,
            message: "请填写身份证号",
            trigger: ["blur", "change"],
          },
          {
            validator: (rule, value, callback) => {
              const ID_Card =
                /^[1-9]\d{5}(18|19|20)\d{2}((0[1-9])|(1[0-2]))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/;
              return ID_Card.test(value);
            },
            message: "身份证号不正确",
            trigger: ["change", "blur"],
          },
        ],
        contractPhonenumber: [
          {
            required: true,
            message: "请填写手机号",
            trigger: ["blur", "change"],
          },
          {
            validator: (rule, value, callback) => {
              const reg_tel =
                /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/; //11位手机号码正则
              return reg_tel.test(value);
            },
            message: "手机号码不正确",
            trigger: ["change", "blur"],
          },
        ],
      },
      radio: "",
      switchVal: false,
    };
  },

  onLoad(data) {
    console.log(data);
    if (data.item) {
      uni.setNavigationBarTitle({
        title: "编辑",
      });
      this.isEdit = true;
      this.bsUserContract = JSON.parse(data.item);
    }
  },

  onReady() {
    this.$refs.uForm.setRules(this.rules);
  },

  methods: {
    // 取消
    reset() {
      this.bsUserContract = {
        contractName: "", // 联系人姓名
        contractCard: "", // 联系人身份证号
        contractPhonenumber: "", // 联系人手机号
      };

      this.$refs.uForm.resetFields();
      this.$refs.uForm.clearValidate();

      if (this.isEdit) {
        uni.navigateBack({
          delta: 1,
        });
      }
    },
    // 提交
    submit() {
      this.$refs.uForm
        .validate()
        .then((res) => {
          this.addLoadinfg = true;
          addVisitorUserApi(this.isEdit, this.bsUserContract)
            .then((res) => {
              if (res.code === 200) {
                uni.showToast({
                  title: this.isEdit ? "编辑成功" : "新增成功",
                  icon: "success",
                  mask: true,
                });
              } else {
                uni.showToast({
                  title: this.isEdit ? "编辑失败" : "新增成功",
                  icon: "error",
                  mask: true,
                });
              }
              this.addLoadinfg = false;
              this.reset();
              if (this.isEdit) {
                uni.navigateBack({
                  delta: 1,
                });
              }
            })
            .catch((err) => {
              this.addLoadinfg = false;
            });
        })
        .catch((err) => {
          console.log(err);
        });
    },
  },
};
</script>

<style lang="scss" scoped>
::v-deep .u-form-item__body__left__content__label {
  font-size: 28rpx !important;
  color: #999999 !important;
}

::v-deep .input-placeholder {
  font-size: 28rpx !important;
  color: #3a3939 !important;
}

::v-deep .u-input__content__field-wrapper__field {
  font-size: 28rpx !important;
  color: #3a3939 !important;
}

::v-deep .u-form-item__body__right__message {
  font-size: 24rpx !important;
}

::v-deep .u-button--success {
  margin-top: 160rpx !important;
  margin-bottom: 32rpx;
  background-color: #0e9489 !important;
  border-color: #0e9489 !important;
}

.add_user {
  background-color: #f3f3f3;
  width: 750rpx;
  height: 100vh;
  padding: 16rpx 32rpx;
}
</style>
